
<template>
  <div class="map-view">
    <div class="total-view">
        <div class="item">
          <div>作业地块数</div>
          <div class="num">{{landHandCount||0}}</div>
        </div>
        <div class="item">
          <div>作业面积(亩)</div>
          <div class="num">{{landTotal||0}}</div>
        </div>
    </div>
    <MapView 
      ref="refMapView"
      @complete="getLandList"
      :selectLandList="farmDataList"
      :plantingPlanId="formdata?.plantingPlanId"
      :bottomList="bottomList"
     :location="locationObj"  />
      <div class="bottom-view">
         <div>农事记录频次</div>
         <div class="item" v-for="(item,index) in bottomList" :key="index">
            <i :style="{'backgroundColor':item.color}"></i>
            <span>
              {{item.text}}
            </span>
         </div>
      </div>
    <div class="location-view" @click="btnLocation">
      <Icon name="aim" class="icon-location"  color="#07c160" />
    </div>
    <div class="right-top-view">
         <Button 
         @click="btnGoUrl"
          type="success"  
          class="btn-top">农事记录</Button>
    </div>
    <div class="right-bottom-view">
         <Button plain 
          type="success" 
          :key="item.value"
          v-for="(item,index) in btnList" 
          @click="btnOpen(item)" 
          class="btn-top" :style="{display:index==0?'flex':'block'}">
          {{formdata[item.key]?getTextName(formdata[item.key],item.key):item.text}}
        </Button>
    </div>
    <Popup v-model:show="showPicker"  :position="'bottom'">
        <Picker
          v-model="selectedValues"
          :columns="columns"
          :title="title"
          :columns-field-names="{text:'meaning',value:'code'}"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
    </Popup>

    <Overlay :show="loading">
      <div class="wrapper">
        <Loading color="#07c160" type="spinner" size="40px" />
       </div>
    </Overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import MapView from './components/farming-land.vue'
import {getCommonSelect,getLandCountList} from '@/api/gis'
import { getCookie } from '@/utils/httpParamsHandler';
import { Button,Popup,Picker,Icon,Overlay,Loading} from 'vant';

const showPicker:any = ref(false)
const loading:any = ref(false)
const title:any = ref('')
const formdata:any =reactive({})
const formdataKey:any =ref('')
const popType:any = ref(1)
const refMapView = ref(null)

const farmDataList = ref([])
const btnList:any =ref([
  {text:'作物品种',value:1,key:'plantingPlanId',icon:'flower-o'},
  {text:'农事任务',value:2,key:'plantingPlanTaskId',icon:'bookmark-o'},
  {text:'记录人',value:3,key:'recordCreateId',icon:'manager-o'}
])  

const bottomList = reactive([
  {color:'rgb(216, 239, 168)',text:'1~5次',count:1},
  {color:'rgb(173, 221, 146)',text:'6~10次',count:2},
  {color:'rgb(254, 202, 160)',text:'11~15次',count:3},
  {color:'rgb(252, 140, 64)',text:'16~20次',count:4},
  {color:'rgb(241, 105, 21)',text:'>20次',count:5}
])
const cropList:any =ref([])
const farmWorkList:any =ref([])
const userList:any =ref([])
const columns:any = ref([])
const landMapList:any = ref([])
const selectedValues:any = ref([])
const locationObj:any =ref({})
const landTotal:any =ref(0)
const landHandCount:any=ref(0)
onMounted(async ()=>{
  if(getCookie('title')){
    document.title=decodeURIComponent(decodeURIComponent(getCookie('title')))||'--'
  }
  getSelectList()
})

const getFarmLandList =async ()=>{
  loading.value=true
  let res:any = await getLandCountList({
    farmId:getCookie('farmId'),
    taskRecordType:1,
    ...formdata
  })
  if(res.success){
      let list = res.data ||{}
      loading.value=false
      let landIds =[]
      Object.keys(list).forEach((key)=> { landIds.push({farmLandId:Number(key),totalNum:list[key]})})
      farmDataList.value = landIds
      getTotal()
  }
}



const getLandList =(data:any)=>{
  let list = data ||[]
  landMapList.value = list
  getFarmLandList()
}

const getSelectList =async()=>{
  //品种
  let res:any = await getCommonSelect({
    page:1,
    limit:100,
    param1:getCookie('farmId'),
    lovCode:'TANC_PLANTING_PLAN'
  })
  if(res.success){
    cropList.value = res.data||[]
    if(cropList.value.length>0){
      formdata['plantingPlanId']=cropList.value[0]?.code
      getFarmWorkList()
    }
  }
  //记录人
  let res1:any = await getCommonSelect({
    page:1,
    limit:100,
    param1:getCookie('farmId'),
    lovCode:'TANC_APP_USER'
  })
  if(res1.success){
    userList.value = res1.data||[]
  }
}

//农事项
const getFarmWorkList=async()=>{
     let res:any = await getCommonSelect({
        page:1,
        limit:100,
        param1:formdata['plantingPlanId'],
        lovCode:'TANC_PLANTING_TASK'
      })
    if(res.success){
     farmWorkList.value=  res.data||[]
    }
}
const getTotal =()=>{
  let total =0
  let list = landMapList.value.filter((item:any)=>farmDataList.value.map((m)=>m.farmLandId).includes(item.farmLandId)) 
  list.forEach((item:any)=>{
    total += Number(item?.mapAreaSize||0)
  })
  landHandCount.value = list.length
  landTotal.value = Number(Number(total||0).toFixed(2))
}
const btnOpen =(item:any)=>{
  showPicker.value= true
  title.value= item.text
  formdataKey.value=item.key
  popType.value = item.value
  selectedValues.value =[formdata[item.key]]||['']
  let objlist ={ meaning: '全部', code: '' }
  if(item.value==1){
    columns.value = cropList.value
  }
  if(item.value==2){
    columns.value =[objlist,...farmWorkList.value]
  }
  if(item.value==3){
    columns.value =[objlist,...userList.value]
  }
}

const btnGoUrl =()=>{
  wx.miniProgram.navigateTo({url:`/farming/records/records?select=0&type=farming`})
}

const onConfirm =(item:any)=>{
  showPicker.value= false
  formdata[formdataKey.value]=item.selectedValues[0]
  window.setTimeout(() => {
    getFarmLandList()
  }, 1000);
}

const getTextName =(Id:any,key:any)=>{
  if(key=='plantingPlanId'){
   return cropList.value.find((row:any)=>row.code==Id)?.meaning
  }
  if(key=='plantingPlanTaskId'){
   return farmWorkList.value.find((row:any)=>row.code==Id)?.meaning
  }
  if(key=='recordCreateId'){
   return userList.value.find((row:any)=>row.code==Id)?.meaning
  }
  return ''
}

//定位当前
const btnLocation =()=>{
   wx.getLocation({
      type: 'wgs84',
      success: (res:any)=> {
        locationObj.value = {
            longitude:Number(res.longitude),
            latitude:Number(res.latitude)
          }
      },
      fail: (err:any)=> {
      }
  })
}
</script>
<style lang="scss" scoped>
.map-view{
  height:100vh;
  width:100vw;
  position: relative;
}
.wrapper{
  position: absolute;
  width:100px;
  height:100px;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
  z-index:99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.total-view{
  display: flex;
  z-index: 999;
  position: absolute;
  top:10px;
  width:300px;
  left:50%;
  margin-left:-150px;
  align-items: center;
  justify-content: space-between;
  .item{
    color:#fff;
    font-size:13px;
    background-color: #00000090;
    border-radius:4px;
    width:120px;
    text-align: center;
    padding:5px 0;
    .num{
      font-size:15px;
      font-weight: bold;
    }
  }
}
.right-top-view,
.right-bottom-view{
  z-index: 999;
  position: absolute;
  bottom:20px;
  right: 10px;
  width:70px;
  .btn-top{
    margin-top:6px;
    width:70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
}
.right-top-view  .van-button,
.right-bottom-view .van-button{
  --van-button-normal-font-size:12px;
  --van-button-normal-padding:2px 4px;
  --van-button-default-height: 30px;
  --van-button-default-line-height:30px;
}
.right-top-view{
  top:100px;
  bottom: auto;
}
.location-view{
  position: absolute;
  z-index:99;
  left:10px;
  bottom:20px;
  height:40px;
  width:40px;
  background-color: #fff;
  border-radius:4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:15px;
  .icon-location::before{
    font-size:24px;
  }
}
.title-view{
  display: flex;
  justify-content:space-between;
  padding:10px 14px;

  .name,.num{
    color: #565656;
    font-size:18px;
    font-weight: bold;
  }
  .cropname{
    font-size:16px;
    color: #ff9c00;
  }
}
.bottom-view{
  position: absolute;
  bottom:70px;
  left:10px;
  background-color: #00000080;
  z-index:999;
  color: #fff;
  font-size:10px;
  padding:4px;
  border:1px solid #bfbfbf;
  .item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top:1px;
    i{
      height:10px;
      width:15px;
    }
    span{
      padding-left:2px;
      font-size:10px;
    }
  }
}
</style>
